<template>
  <div style="min-height: 100vh">
    <div class="bg">
      <div style="width: 600px">
        <!--这是主页搜索栏-->
        <!--        <div style="text-align: center; color: #409EFF; font-size: 30px; margin-bottom: 20px">好看、好用、好玩，都在这里</div>-->
        <div style="display: flex">
          <el-input v-model="name" size="medium" prefix-icon="el-icon-search"
                    placeholder="在这里可以搜索你想了解的内容"></el-input>
          <el-button @click="$router.push({ path: '/front/Search', query: { name: name } })" size="medium"
                     type="primary" style="margin-left: 5px; background-color: green">
            <i class="el-icon-search"></i>
          </el-button>
        </div>
      </div>
    </div>

    <div
        style="width: 70%; background-color: #fff; margin: 10px auto; padding: 20px; border-radius: 5px; position: relative">

      <!--发布商品 发布求购按钮-->
      <el-button @click="$router.push('/front/addGoods')" style="position: absolute; top: 20px; right: -150px"
                 size="medium" type="primary" plain>发布商品
      </el-button>
      <el-button @click="$router.push('/front/UserHelp')" style="position: absolute; top: 70px; right: -150px"
                 size="medium" type="primary" plain>发布求购
      </el-button>

      <!--商品分页查询筛选条件 -->
      <div style="margin-bottom: 20px">
        <el-select v-model="category" size="medium" style="width: 100px" @change="loadGoods(1)">
          <el-option value="全部"></el-option>
          <el-option v-for="item in categoryList" :key="item.id" :value="item.name"></el-option>
        </el-select>

        <el-select v-model="sort" size="medium" style="width: 200px; margin-left: 10px" @change="loadGoods(1)">
          <el-option value="最热"></el-option>
          <el-option label="环保产品" value="2"></el-option>
        </el-select>
      </div>

      <div>
        <!--商品-->
        <el-row :gutter="10">
          <el-col :span="8" v-for="item in goodsList" :key="item.id">
            <div style="margin-bottom: 20px" class="goods-item"
                 @click="$router.push('/front/goodsDetail?id=' + item.id)">
              <img :src="item.goodsImage" alt=""
                   style="width: 100%; display: block; height: 260px; margin-bottom: 10px; border-radius: 5px">
              <div style="font-size: 16px; height: 40px; color: #555; margin-bottom: 10px" class="line2 goods-name">
                {{ item.name }}
              </div>
              <div style="display: flex; align-items: baseline">
                <strong style="color: red; font-size: 24px">￥{{ item.price }}</strong>
                <span style="margin-left: 20px; color: #666">{{ item.browse }}人浏览</span>
                <span style="margin-left: 20px; color: #666">{{ item.isHot }}人点赞</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <div style="margin: 15px auto">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="this.page.pageNo"
              :page-sizes="[5, 10, 20]"
              :page-size="this.page.pageSize"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

export default {

  data() {
    return {
      categoryList: [],//条件筛选
      goodsList: [],  // 所有的数据
      page: {
        pageNo: 1,   // 当前的页码
        pageSize: 8,// 每页显示的个数
      },
      total: 0,
      category: '全部',
      sort: '最新',
      name: '',
      user:JSON.parse(localStorage.getItem('xm-user') || '{}'),
    }
  },
  mounted() {
    // this.loadCategory()
    this.loadGoods(1)
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    // loadCategory() {
    //   this.$request.post('/eco/goods/page', {
    //     pageNo:this.pageNo,
    //     pageSize:this.pageSize
    //   }).then(res => {
    //     this.categoryList = res.data || []
    //     console.log(res)
    //   })
    // },
    loadGoods(pageNum) {  // 分页查询
      console.log(this.page)
      if (pageNum) this.page.pageNo = pageNum
      this.$request.post('/eco/goods/page',this.page).then(res => {
        if (res.code == 200) {
          this.goodsList = res.data?.list
          this.total = res.data?.total
          console.log("res:",res)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(pageNum) {
      this.loadGoods(pageNum)
    },
  }
}
</script>

<style scoped>
.bg {
  height: 400px;
  background-image: url("@/assets/imgs/home.jpg");
  background-size: 100%;
  background-position-y: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-item {
  cursor: pointer;
}

.goods-item img, .goods-name {
  transition: all .2s;
}

.goods-item:hover img {
  scale: 1.03;
}

.goods-item:hover .goods-name {
  color: #ec3d3d !important;
}
</style>